<template>
	<SecondTitle title="客流流向排名" />
	<div class="bar">
		<Echarts container="accepted-project-ratio" :options="option()" :height="600" />
	</div>
</template>
<script lang="ts" setup>
	import { convertToPinyin } from '../../../utils/common'
	import * as echarts from 'echarts'

	const option = () => {
		let barData = [
			{
				name: '深圳',
				value: 90,
			},
			{
				name: '北京',
				value: 70,
			},
			{
				name: '上海',
				value: 60,
			},
			{
				name: '广州',
				value: 50,
			},
			{
				name: '南京',
				value: 30,
			},
		]
		barData.forEach((bar: any, i: number) => {
			bar.itemStyle = {
				color: new echarts.graphic.LinearGradient(
					0,
					0,
					1,
					0,
					[
						{
							offset: 0,
							color: i % 2 == 0 ? 'rgba(15, 84, 153, 0.396)' : 'rgba(117, 117, 117, 1)',
						},
						{
							offset: 1,
							color: i % 2 == 0 ? 'rgba(115, 208, 255, 1)' : 'rgba(229, 229, 229, 1)',
						},
					],
					false,
				), // 渐变
			}
		})
		let opt = {
			grid: {
				left: '-19%',
				right: '1%',
				bottom: '0%',
				top: '1%',
				containLabel: true,
				z: 22,
			},
			xAxis: {
				axisLine: {
					lineStyle: {
						color: '#44A0B7',
					},
				},
				axisLabel: {
					color: '#fff',
				},
				show: false,
				type: 'value',
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
			},
			yAxis: {
				// name: '单位:户',
				type: 'category',
				inverse: true,
				data: barData.map((_) => _.name),
				axisLine: {
					show: false,
					lineStyle: {
						color: '#44A0B7',
					},
				},
				axisLabel: {
					show: true,
					margin: 10,
					color: 'rgb(188,217,230)',
					fontSize: 25,
					// 调整左侧文字的3个属性，缺一不可
					verticalAlign: 'bottom',
					align: 'top',
					//调整文字上右下左
					padding: [20, 200, 30, 20],
					formatter: function (value: any) {
						return `${value}   ${convertToPinyin(value).toLocaleUpperCase()}`
					},
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: false,
				},
			},
			series: [
				{
					name: '',
					type: 'bar',
					// barWidth: 6,
					barWidth: 60,
					data: barData,
					itemStyle: {
						borderWidth: 40,
						borderColor: 'rgba(0,0,0,0)',
					},
					label: {
						show: true, //开启显示
						formatter: (data: any) => {
							return ((data.value / barData.reduce((prev, item) => prev + item.value, 0)) * 100).toFixed(2) + '%'
						},
						lineHeight: 10,
						offset: [110, 0],
						position: 'insideRight', //在上方显示
						color: '#FFFFFF',
						fontSize: 30,
						fontWeight: 600,
					},
				},
				{
					zlevel: 1,
					name: '背景',
					type: 'bar',
					// barWidth: 14,
					barWidth: 50,
					barGap: '-90%',
					data: [100, 100, 100, 100, 100],
					itemStyle: {
						color: 'rgba(131, 132, 132, 0)',
						// barBorderRadius: [7, 7, 7, 7],
						barBorderRadius: [0, 0, 0, 0],
						borderColor: 'rgba(71, 93, 102, 0.8)',
					},
				},
			],
		}
		return opt
	}
</script>

<style lang="scss" scoped>
	.bar {
		height: 580px;
	}
</style>
